<!--  -->
<template>
    <view class="flex justify-between w-full text-sm mt-5 items-center">
        <view class="grid place-items-center">
            <view
                class="iconfont icon-ic_fabu"
                :class="props.steps >= 0 ? 'step-active' : 'step-normal'"
            ></view>
            卖家发布
        </view>
        <view
            class="iconfont icon-you3 mb-6"
            :class="props.steps >= 1 ? 'arrow-active' : 'arrow-normal'"
        ></view>
        <view class="grid place-items-center">
            <view
                class="iconfont icon-ic_queren"
                :class="props.steps >= 1 ? 'step-active' : 'step-normal'"
            ></view>
            经纪人确认
        </view>
        <view
            class="iconfont icon-you3 mb-6"
            :class="props.steps >= 2 ? 'arrow-active' : 'arrow-normal'"
        ></view
        ><view class="grid place-items-center">
            <view
                class="iconfont icon-ic_shenhe"
                :class="props.steps >= 2 ? 'step-active' : 'step-normal'"
            ></view>
            平台审核
        </view>
        <view
            class="iconfont icon-you3 mb-6"
            :class="props.steps == 3 ? 'arrow-active' : 'arrow-normal'"
        ></view>
        <view class="grid place-items-center">
            <view
                class="iconfont icon-ic_shangjia"
                :class="props.steps == 3 ? 'step-active' : 'step-normal'"
            ></view>
            自动上架
        </view>
    </view>
</template>

<script setup lang="ts">
const props = defineProps<{
    steps: 0 | 1 | 2 | 3;
}>();
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.step-normal {
    transition: all 0.5s;
    width: 64rpx;
    height: 64rpx;
    background-color: #eceff7;
    color: #929493;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    margin-bottom: 10rpx;
}
.step-active {
    transition: all 0.5s;
    width: 64rpx;
    height: 64rpx;
    background-color: #0a87fa;
    color: white;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    margin-bottom: 10rpx;
}
.arrow-active {
    transition: all 0.5s;
    color: #0a87fa;
}
.arrow-normal {
    transition: all 0.5s;
    color: #929493;
}
</style>
